<template>
	<view class="container">
		<!-- 轮播 -->
		<view class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
				<!-- indicator-color='rgba(255,255,255,0.3)' -->
				<swiper-item>
					<!-- v-for="(item,index) in bannerlist" :key='index' -->
					<view class="swiper-item">
						<image src="../../static/index_img/banner1.png" mode=""></image>
						<!-- <image :src="item.img" mode=""></image> -->
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/index_img/banner1.png" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/index_img/banner1.png" mode=""></image>
					</view>
				</swiper-item>
			</swiper>

		</view>
		<!-- 4个选项 -->
		<view class="header">
			<view class="box" v-for="(item, index) in list" :key="index" @tap="go(index)">
				<image :src="item.img" mode=""></image>
				<text class="font26">{{item.txt}}</text>
			</view>
		</view>

		<!-- AD通告 -->
		<view class="announcement font26">
			<view>
				<image class="m_r30" src="../../static/index_img/ad.png" mode=""></image>
			</view>
			<text>AD通告火热测试中 更多消息敬请关注...</text>
			<!-- <swiper vertical="true" autoplay="true" circular="true" interval="3000">
				<swiper-item v-for="(item, index) in msg" :key="index"> 
					<navigator :url="'../../index/gongdao-detail/gongdao-detail?id='+item.id">{{item.title}}</navigator>
				</swiper-item>
			</swiper> -->
		</view>

		<!-- 合作品牌 -->
		<view class="brands">
			<image class="bg" src="../../static/index_img/cooperation_bg.png" mode=""></image>
			<view class="title colorfff" @tap="go(1)">
				<text class="font36">合作品牌</text>
				<view class="more font26">
					<text>查看更多合作品牌</text>
					<image src="../../static/my_img/arrow_l.png" mode=""></image>
				</view>
			</view>
			<view class="pictures m_t30">
				<image v-for="(item, index) in logo" :src="item" :key="index" mode=""></image>
			</view>
		</view>

		<!-- 新手引导  引入公共模板-->
		<Guide></Guide>

		<!-- 热点资讯 -->
		<view class="hotnew">
			<view class="hotnew_title font34">
				<text>热点资讯</text>
			</view>
			<view class="newslist">
				<view class="new" v-for="(item, index) in newlist" :key="index">
					<view class="new_left font26">
						<text class="new_title font32">{{item.title}}</text>
						<view class="new_detail font26 m_t30 color_title">
							<text class="name">{{item.name}}</text>
							<text class="count m_l20">{{item.count}}</text>
							<text class="hour m_l20">{{item.hour}}</text>
						</view>
					</view>
					<view class="new_right">
						<image :src="item.src" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Guide from "../../common/guide.vue"
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'

	export default {
		data() {
			return {
				current: 0,
				info: [{
						colorClass: 'uni-bg-red',
						url: "../../static/index_img/banner1.png",
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: "../../static/index_img/banner1.png",
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: "../../static/index_img/banner1.png",
						content: '内容 C'
					}
				],
				list: [{
					"img": "../../static/index_img/icon_1.png",
					"txt": "平台资质"
				}, {
					"img": "../../static/index_img/icon_2.png",
					"txt": "品牌入驻"
				}, {
					"img": "../../static/index_img/icon_3.png",
					"txt": "奖项认证"
				}, {
					"img": "../../static/index_img/icon_4.png",
					"txt": "邀请"
				}, ],
				logo: [
					"../../static/index_img/pic.png",
					"../../static/index_img/pic.png",
					"../../static/index_img/pic.png",
					"../../static/index_img/pic.png",
					"../../static/index_img/pic.png",
					"../../static/index_img/pic.png",
					"../../static/index_img/pic.png",
					"../../static/index_img/pic.png",
					"../../static/index_img/pic.png"
				],
				newlist: [{
					"title": "火币区块链行业周报",
					"name": "金色财经",
					"count": "1255阅读",
					"hour": "1小时前",
					"src": "../../static/index_img/new.png"
				}, {
					"title": "火币区块链行业周报",
					"name": "金色财经",
					"count": "1255阅读",
					"hour": "1小时前",
					"src": "../../static/index_img/new.png"
				}, {
					"title": "火币区块链行业周报",
					"name": "金色财经",
					"count": "1255阅读",
					"hour": "1小时前",
					"src": "../../static/index_img/new.png"
				}, {
					"title": "火币区块链行业周报",
					"name": "金色财经",
					"count": "1255阅读",
					"hour": "1小时前",
					"src": "../../static/index_img/new.png"
				}, {
					"title": "火币区块链行业周报",
					"name": "金色财经",
					"count": "1255阅读",
					"hour": "1小时前",
					"src": "../../static/index_img/new.png"
				}, ]
			}
		},
		components: {
			Guide,
			uniSwiperDot
		},
		onLoad() {

		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			
			// nav包括的4个入口
			go(index) {
				if(index == 0) {
					uni.navigateTo({
						url:"../index/qualification"	//平台资质
					})
				} else if(index == 1) {
					uni.navigateTo({
						url:"../index/brand"	//品牌入驻
					})
				} else if(index == 2) {
					uni.navigateTo({
						url:"../index/award"	//奖项认证
					})
				} else if(index == 3) {
					uni.navigateTo({
						url: "../my/invite"		//邀请
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		overflow: hidden;
		// height: 100vh;
	}

	// banner部分
	.banner {

		// 整个轮播容器的高度需要调整
		uni-swiper {
			height: 320upx;
		}

		swiper swiper-item {
			width: 84% !important;
			margin: 0 8%;
			display: flex;
			justify-content: center;
		}

		swiper swiper-item .swiper-item {
			width: 95% !important;
			height: 280upx !important;
			line-height: 280upx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		image {
			width: 100%;
			height: 250upx;
		}
	}

	// 头部四个入口
	.header {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 15upx 0;

		.box {
			width: 25%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			image {
				width: 65upx;
				height: 65upx;
				margin: 15upx 0;
			}
		}
	}

	// AD通告
	.announcement {
		padding: 30upx;
		display: flex;
		align-items: center;

		image {
			width: 120upx;
			height: 30upx;
		}
	}

	// 合作品牌
	.brands {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;
		border-bottom: 20upx solid #F0F0F8;
		padding: 30upx 24upx;

		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.title {
			width: 100%;
			z-index: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.more {
				width: 70vw;
				color: #F0F8FF;
				display: flex;
				align-items: center;
				justify-content: space-between;
				image {
					width: 14upx;
					height: 20upx;
					transform: rotate(180deg);
				}
			}
		}

		.pictures {
			z-index: 1;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: space-between;

			image {
				width: 218upx;
				height: 90upx;
				margin: 0 0 25upx 0;
			}
		}
	}

	// 热点资讯
	.hotnew {
		width: 100%;
		display: flex;
		flex-direction: column;
		border-bottom: 20upx solid #F0F0F8;

		.hotnew_title {
			display: flex;
			align-items: center;
			padding: 20upx 30upx;
		}

		.newslist {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.new {
				width: 92%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1upx solid lightgray;

				.new_left {
					padding: 20upx 0 20upx 0;
				}

				.new_right {
					padding: 20upx 0;
					image {
						width: 212upx;
						height: 140upx;
					}
				}
			}
		}
	}
</style>
